<template>
  <div class="filetree-container" tabindex="1" @keydown="handleKeyDown">
    <FileTreeNode path="" />
    <ContextMenu v-if="contextMenuState.isActive" v-bind:items="contextMenuItems" v-bind:pos="contextMenuState.pos" @myclosemenu="handleCloseMenu" />
    <FileUploadInput />
  </div>
</template>
<script>
  import FileTreeNode from './file-tree-node.vue'
  import FileUploadInput from './file-upload-input.vue'
  import ContextMenu from '../content-menu'
  import FileTreeContextMenuItems from './context-menu-items'

  export default {
    components: {
      FileTreeNode,
      FileUploadInput,
      ContextMenu
    },
    data: function () {
      return {
        contextMenuItems: FileTreeContextMenuItems,
      }
    },
    computed: {
      contextMenuState: function () {
        return this.$store.state.file.contextMenuState
      }
    },
    methods: {
      handleKeyDown: function (e) {
        e.preventDefault()
      },
      handleCloseMenu: function (e) {
        this.$store.commit('file/closeContextMenu')
      }
    }
  }

</script>
